<template>
  <div class="shortcut-key">
    <div class="align-con">
      <ul>
        <li @click.stop.capture="onSingleCenterAlign()"><el-tooltip class="item" effect="dark" content="单个水平居中对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onTopAlign()" class="icon-align-up" ></li>
        <li @click.stop.capture="onBottomAlign()" class="icon-align-below"></li>
        <li @click.stop.capture="onLeftAlign()" class="icon-align-left"></li>
        <li @click.stop.capture="onRightAlign()" class="icon-align-right"></li>
        <li @click.stop.capture="onHorizontalCenterAlign()"><el-tooltip class="item" effect="dark" content="横向中心对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onHorizontalCenterDistribute()"><el-tooltip class="item" effect="dark" content="横向分布对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onVerticalCenterAlign()"><el-tooltip class="item" effect="dark" content="纵向中心对齐" placement="left"><i class="icon-vertical-average-distribution"></i></el-tooltip></li>
        <li @click.stop.capture="onVerticalCenterDistribute()"><el-tooltip class="item" effect="dark" content="纵向分布对齐" placement="left"><i class="icon-vertical-average-distribution"></i></el-tooltip></li>
        <li @click.stop="onGroupComponent()"><el-tooltip class="item" effect="dark" content="打组组件" placement="left"><i class="icon-wall"></i></el-tooltip></li>
        <li @click.stop="onBreakupComponent()"><el-tooltip class="item" effect="dark" content="打散组合" placement="left"><i class="icon-qr-code"></i></el-tooltip></li>
      </ul>
    </div>
    <div v-if="state.isActiveKeyboard" class="keyboard-con">
      <h3>快捷键说明</h3>
      <ul>
        <li><span>删除</span>Delete</li>
        <li><span>复制</span>Ctrl + C</li>
        <li><span>多选</span>Shift</li>
        <li><span>回撤</span>Ctrl+Z/Ctrl+Shift+Z</li>
        <li><span>创建组合</span>Ctrl + G</li>
        <li><span>解散组合</span>Ctrl + Shift + G</li>
        <li><span>上对齐</span>Ctrl+up/Ctrl+Shift+up</li>
        <li><span>下对齐</span>Ctrl+down/Ctrl+Shift+down</li>
        <li><span>左对齐</span>Ctrl+left/Ctrl+Shift+left</li>
        <li><span>右对齐</span>Ctrl+right/Ctrl+Shift+right</li>
      </ul>
    </div>
    <div class="btn-keyboard" @click.stop="onKeyboard" :class="{active:state.isActiveKeyboard}">
      <i class="jy-icon-keyboard"></i>
      <p>快捷键</p>
    </div>
    <div v-if="siteAttrs.h5Type == H5_TYPE.mobile" class="btn-add-minus-con">
      <i class="jy-icon-plus btn-add" @click.stop="onAddScale" :class="{active:state.isActiveAdd}" @mouseover="onAddOver" @mouseout="onAddOut"></i>
      <i class="jy-icon-minus btn-minus" @click.stop="onMinusScale" :class="{active:state.isActiveMinus}" @mouseover="onMinusOver" @mouseout="onMinusOut"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { H5_TYPE, MOBILE_WID_HEI } from '@/const/'
import { ALIGN_TYPE } from '@/const/web/'
import { useWebSiteStore } from '@/store/web/site'
import { useWebComponentStore } from '@/store/web/component'
import { useWebPageStore } from '@/store/web/page'

const state =  reactive({
  isActiveKeyboard: false,
  isActiveAdd: false,
  isActiveMinus: false,
})

const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()
const siteAttrs = computed(() => {
  return useWebSite.attrs
})
const siteStatus = useWebSite.siteStatus
const onTopAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.top)
}
const onBottomAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.bottom)
}
const onLeftAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.left)
}
const onRightAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.right)
}
const onSingleCenterAlign = () => {
  //ALIGN_TYPE.singleCenter
  useWebComponent.singleAlignComponents()
}
const onHorizontalCenterAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.horizontalCenterAlign)
}
const onHorizontalCenterDistribute = () => {
  useWebSite.alignComponents(ALIGN_TYPE.horizontalCenterDistribute)
}
const onVerticalCenterAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.verticalCenterAlign)
}
const onVerticalCenterDistribute = () => {
  useWebSite.alignComponents(ALIGN_TYPE.verticalCenterDistribute)
}
const onGroupComponent = () => {
  useWebComponent.isGroupCurrentComponent(true)
}
const onBreakupComponent = () => {
  useWebComponent.isGroupCurrentComponent(false)
}
const onMinusScale = () => {
  state.isActiveMinus = true;
  let scale = siteStatus.scale + 0.2
  if(scale >= 2 ){
    scale = 2
  }
  useWebSite.updateSiteScale(scale)
  // this.$nextTick( () => {
  //   EventBus.$emit("refreshScale")
  // })
}
const onAddOver = () => {
  state.isActiveAdd = true
}
const onAddOut = () => {
  state.isActiveAdd = false
}
const onMinusOver = () => {
  state.isActiveMinus = true
}
const onMinusOut = () => {
  state.isActiveMinus = false
}
const onAddScale = () => {
  state.isActiveAdd = true
  let scale = siteStatus.scale - 0.2
  if(scale <= 1 ) {
    scale = 1
  }
  useWebSite.updateSiteScale(scale)
  // this.$nextTick( () => {
  //   EventBus.$emit("refreshScale")
  // })
}
const onKeyboard = () => {
  state.isActiveKeyboard = !state.isActiveKeyboard
}
const initComp = () => {
  if(useWebSite.attrs.h5Type != H5_TYPE.mobile) {
    window.setTimeout(() => {
      let scale = (window.innerWidth - MOBILE_WID_HEI.leftWidth - MOBILE_WID_HEI.rightWidth - 80) / useWebPage.currentPage!.attrs.width
      if(scale > 1){
        scale = 1
      }
      useWebSite.updateSiteScale(scale)
    }, 1000)
  }
}
initComp()
</script>
